<template>
	<view class="container">
		<van-nav-bar
		  title="添加挂单"
		  :border='false'
		  left-arrow	
		  @click-left='leftHistory'
		/>
		<view class="title">
			收购类型：KOI
		</view>
		<view class="convert">
			<view class="purchase bottom">
				<view class="purchaseTitle ">收购单价</view>
				<view class="content">
					1KOI=   
					<van-field v-model="UnitPrice"/>
					USDT
				</view>
			</view>
			<view class="purchase">
				<view class="purchaseTitle"></view>
				<view class="content text">
					 <view>昨天KOI收盘价1.1111USDT，</view>
					 <view>不能低于收盘价收购 <text class="history">查看历史价格</text></view>
				</view>
			</view><view class="purchase">
				<view class="purchaseTitle">收购数量</view>
				<view class="content">
					1KOI=   
					<van-field v-model="NumberPrice"/>
					USDT
				</view>
			</view><view class="purchase last">
				<view class="purchaseTitle">单笔最大 数量</view>
				<view class="content">
					1KOI=   
					<van-field v-model="MaxNumberPrice"/>
					USDT
				</view>
			</view>
		</view>
		<!--  -->
		<view class="Tips">
			<view><text class="Tipstitle">收购方式</text><text class="TipsCenter">USDT</text></view>
			<view><text class="Tipstitle">账户余额</text><text class="TipsCenter">61452.215USDT</text></view>
		</view>
		<view class="Instructions">
			<view class="InstructionsTitle">说明</view>
			<view class="InstructionsContent">确认挂单后，会从您的账户冻结对应USDT数量，每完成一笔收购订单，您就会收到对应的KOI。如果您停止挂单，剩余的USDT会退回到您的账户。	</view>
		</view>
		<view class="footer">
					<button class="btns" @click="pendingOrder">
						确认挂单
					</button>
				</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
	// 收购单价
	const UnitPrice = ref('')
	// 收购数量
	const NumberPrice = ref('')
	// 单笔最大数量
	const MaxNumberPrice = ref('')
	const pendingOrder =()=>{
		console.log('挂单')
		uni.navigateTo({
			url:'/service/Successful/index'
		})
	}
	const leftHistory =()=>{history.back()}
</script>

<style lang="scss" scoped>
	::v-deep.van-nav-bar__title,.van-ellipsis{
		font-size: 36px;
		color: white;
		font-weight: 500;
		overflow: visible;
	}
	::v-deep.van-nav-bar__content{
		height: 88px;
		background-color: #121317;
	}
	::v-deep.van-nav-bar__arrow{
		font-size: 32px;
		color: #ffffff;
	}
	.container{
		height: 100vh;
		background: #121317;
		padding: 0 32px;
		.title{
			color: white;
			font-size: 36px;
			padding: 40px 0;
		}
		.convert{
			padding: 40px;
			box-sizing: border-box;
			width: 100%;
			background-color: #2a2b2e;
			border-radius: 16px;
			
			.purchase{
				display: flex;
				height: 88px;
				align-items: center;
				margin-bottom: 40px;
				
				.purchaseTitle{
					width: 100px;
					font-size: 24px;
					color: white;
					margin-right: 24px;
				}
				// .bottom{
				// 	margin-bottom: 16px;
				// }
				.content{
					font-size: 28px;
					color: white;
					display: flex;
					align-items: center;
				}
				.text{
					flex-direction: column;
					justify-content: left;
					align-items: flex-start;
					color: #afafb0;
					.history{
						color: #00D0B9;
						font-size: 24px;
						// text-decoratio;
					}
				}
			}
			.bottom{
				margin-bottom: 16px;
			}
			.last{
				margin-bottom: 0;
			}
		}
		.Tips{
			height: 160px;
			margin: 32px 0;
			width: 100%;
			background-color: #2a2b2e;
			border-radius: 16px;
			view{
				height: 80px;
				padding: 0 32px ;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.Tipstitle{
					font-size: 24px;
					color: #ffffff;
				}
				.TipsCenter{
					font-size: 24px;
					color: #afafb0;
				}
			}
		}
		.Instructions{
			padding: 24px 32px;
			display: flex;
			background-color: #2a2b2e;
			border-radius: 16px;
			
			
			.InstructionsTitle{
				padding-right: 24px;
				width: 50px;
				font-size: 24px;
				color: white;
			}
			.InstructionsContent{
				font-size: 24px;
				color: #afafb0;
				flex: 1;
				  letter-spacing: 1.5px;

			}
		}
	}
	
	::v-deep.van-cell{
		width: 240px;
		height: 88px;
		background: rgba(255,255,255,0.1);
		border-radius: 16px;
		border: 2px solid rgba(255,255,255,0.6);
		margin: 0 15px;
	}
	.footer {
				width: 100vw;
				height: 112px;
				background: rgb(0, 0, 0);
				position: fixed;
				bottom: 0;
				left: 0;
				display: flex;
				align-items: center;
				.btns {
					width: 280px;
					height: 80px;
					background: linear-gradient(151deg, #06FFDD 0%, #4E47FF 100%);
					border-radius: 16px;
					font-size: 28px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #000000;
					line-height: 88px;
				}
			}
</style>